<template>
  <div v-if="this.$store.state.pointClickDialog" :style="modalStyle">
    <div class="falling-animation"
         style="background: url('/map_bottom.png') no-repeat center; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;">
      <div style="margin-bottom: 400px;display: block">
        <div class="info-box">
          <div class="info-header">
            <component style="color: #0eee3b" :is="HomeFilled" class="icon" />
            <div class="text-container">
              <!-- 第一项及其值 -->
              <span class="item-title">场所总数</span>
              <div class="item-value">{{ infoItem.clientCount }}</div>
            </div>
          </div>
          <div class="info-header">
            <component style="color: #0edbee" :is="Monitor" class="icon" />
            <div class="text-container">
              <!-- 第二项及其值 -->
              <span class="item-title">设备总数</span>
              <div class="item-value">{{ infoItem.equipmentCount }}</div>
            </div>
          </div>
          <div class="info-header">
            <component style="color: #d0a63c" :is="WarningFilled" class="icon" />
            <div class="text-container">
              <!-- 第三项及其值 -->
              <span class="item-title">当前报警数</span>
              <div class="item-value">{{ infoItem.nowWarnCount }}</div>
            </div>
          </div>
        </div>
        <div class="company-name">
          {{ infoItem.clientName }}
        </div>
      </div>
    </div>
  </div>
</template>



<script>
import { HomeFilled, Monitor, WarningFilled } from "@element-plus/icons-vue";

export default {
  name: "ContentFramework",
  props: {
    infoItem: {
      type: Object,
      default: {},
    },
    infoData: {
      type: String,
      default: '',
    },
    top: {
      type: String,
      default: '0',
    },
    left: {
      type: String,
      default: '0',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '130%',
    },
  },
  computed: {
    HomeFilled() {
      return HomeFilled;
    },
    Monitor() {
      return Monitor;
    },
    WarningFilled() {
      return WarningFilled;
    },
    modalStyle() {
      return {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'fixed',
        top: this.top,
        left: this.left,
        width: this.width,
        height: this.height,
        infoData: this.infoData,
      };
    },
  },
};
</script>

<style scoped>
.info-box {
  padding: 10px;
  width: 150px; /* 确保设置合适的宽度 */
  height: 230px;
  /* 地图弹窗背景色 */
  background-color: rgba(0, 27, 58, 0.85);
  border: 1px solid #3b9fff;
  border-radius: 8px;
  margin: 0 auto; /* 确保 box 在中心 */
}
.falling-animation {
  width: 50px;
  height: 50px;
  position: absolute;
  top: -100px;
  animation: fall 1s forwards;
}

@keyframes fall {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100px);
  }
}

.icon {
  width: 26px;
  color: #3b9fff;
  font-size: 24px;
  margin-right: 10px;
}

.text-container {
  display: flex;
  flex-direction: column; /* Stack item and value vertically */
}

.item-title {
  font-size: 17px;
  color: #2CC2EF;
  display: inline; /* Keep item title and value aligned with icon */
}

.item-value {
  font-size: 20px;
  color: #00eaff;
  display: block; /* Ensure value appears on a new line */
  margin-top: 5px;
}

.info-header {
  display: flex;
  align-items: flex-start; /* Align icon and text container at the top */
  margin-bottom: 10px;
}

.company-name {
  font-size: 15px;
  color: #2CC2EF;
  text-align: center;
  z-index: 201;
  margin-top: 10px; /* 添加间距 */
  white-space: normal; /* 允许换行 */
  width: 170px; /* 确保宽度足够，以便换行 */
  word-wrap: break-word; /* 允许单词换行 */
  overflow-wrap: break-word; /* 同样允许单词换行 */
}




</style>
